<template>
    <div>
        <div class="notice">
            <h4>qq.com.cn</h4>
        </div>
        <div class="btn-group">
            <Button type="success" @click="handleAdd">添加记录</Button>
            <Button>暂停</Button>
            <Button>启用</Button>
            <Button>设置</Button>
            <Button @click="handleShowLog">日志</Button>
            <Input v-model="inputValue" placeholder="请输入关键字" style="width: 300px" />
        </div>
        <AddRecord v-if="addShow" @hide="handleHide"></AddRecord>
        <Table ref="selection" :columns="columns" :data="data"
        >
        </Table>
        <!--        <Button @click="handleSelectAll(true)">Set all selected</Button>-->
        <!--        <Button @click="handleSelectAll(false)">Cancel all selected</Button>-->
        <Paging></Paging>
<!--        日志显示-->
        <Drawer  :closable="false" v-model="showLog" width="45%">
            <h2 style="margin-bottom: 10px">日志记录：</h2>
            <p>2019-05-23 15:14:29： 添加新域名 shenshuo.me</p>
            <p>2019-05-23 15:14:29： 添加新域名 shenshuo.me</p>
            <p>2019-05-23 15:14:29： 添加新域名 shenshuo.me</p>
        </Drawer>

    </div>
</template>
<script>
    import Vue from 'vue'
    import { Table, Button, Input, Drawer } from 'view-design'
    import Paging from './components/Paging'

    import AddRecord from './components/AddRecord'
    import BtnActionTip from './components/BtnActionTip'
    Vue.component('BtnActionTip',BtnActionTip)

    export default {
        components: {
            Table,
            Button,
            Input,
            Drawer,

            Paging,
            AddRecord
        },
        data () {
            return {
                inputValue: '',
                addShow: false,
                showLog: false,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '主机记录',
                        key: 'host',
                        render: (h, params) => {
                            return h('span', {
                                style: {
                                    color: '#5cadff'
                                }
                            }, params.row.host)
                        }
                    },
                    {
                        title: '记录类型',
                        key: 'type'
                    },
                    {
                        title: '区域',
                        key: 'areas'
                    },
                    {
                        title: '记录值',
                        key: 'value',
                        render: (h, params) => {
                            return h('span', {
                                style: {
                                    color: '#5cadff'
                                }
                            }, params.row.value)
                        }
                    },
                    {
                        title: 'MX',
                        key: 'MX'
                    },
                    {
                        title: 'TTL',
                        key: 'TTL'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h) => {
                            return h('BtnActionTip')
                        }
                        // render: (h, params) => {
                        //     return h('div', [
                        //         h('Tooltip',
                        //             {
                        //                 props: {
                        //                     content: '确定删除吗'
                        //                 }
                        //             },[
                        //             h('Button', {
                        //                 props: {
                        //                     type: 'primary',
                        //                     size: 'small'
                        //                 },
                        //                 style: {
                        //                     marginRight: '5px'
                        //                 },
                        //                 on: {
                        //                     click: () => {
                        //                         this.show(params.index)
                        //                     }
                        //                 }
                        //             }, '暂停')]
                        //         ),
                        //         h('Button', {
                        //             props: {
                        //                 type: 'error',
                        //                 size: 'small'
                        //             },
                        //             on: {
                        //                 click: () => {
                        //                     this.remove(params.index)
                        //                 }
                        //             }
                        //         }, '删除')
                        //     ]);
                        // }
                    }
                ],
                data: [
                    {
                        host: '111',
                        type: 'A',
                        areas: '默认',
                        value: '1.1.1.1',
                        MX: '',
                        TTL: '600'
                    },
                    {
                        host: '222',
                        type: 'CAME',
                        areas: '默认',
                        value: 'Da-collector-983289967.us-east-1.elb.amazonaws.com',
                        MX: '',
                        TTL: '600'
                    },
                    {
                        host: '333',
                        type: 'A',
                        areas: '内网',
                        value: '3.3.3.3',
                        MX: '',
                        TTL: '600'
                    },
                    {
                        host: '444',
                        type: '',
                        areas: '电信',
                        value: '4.4.4.4',
                        MX: '',
                        TTL: '600'
                    },
                    {
                        host: '555',
                        type: 'A',
                        areas: '默认',
                        value: '5.5.5',
                        MX: '',
                        TTL: '600'
                    },
                    {
                        host: '*',
                        type: 'A',
                        areas: '默认',
                        value: '0.0.0.0',
                        MX: '',
                        TTL: '600'
                    },
                ]
            }
        },
        methods: {
            handleAdd () {
                this.addShow = true
            },
            handleHide () {
                this.addShow = false
            },
            handleShowLog () {
                this.showLog = true
            },
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`
                })
            },
            remove (index) {
                this.data.splice(index, 1);
            }
        }
    }
</script>
<style scoped>
    div {
        margin-top: 20px;
    }
    .notice {
        width: 100%;
        height: 30px;
        line-height: 30px;
        border: 1px solid rgb(143,230,177);
        background: rgb(237,255,243);
        margin: 20px 0;
        padding-left: 10px;
    }
    .btn-group Button:first-child {
        margin-right: 10px;
    }
    .btn-group .ivu-input-wrapper {
        margin-top: 0;
    }
</style>